/************************总容器**************************/
.wrapper{
  width: 100%;
  height: 100%;
}
/************************header**************************/
.wrapper header{
  width: 100%;
  height: 12vw;
  background-color: #0097FF;

  display: flex;
  align-items: center;
  padding: 0 1vw 0 3vw;  /*上 右 下 左*/
}
.wrapper header .location-text{
  font-size: 4.5vw;
  font-weight: 700;
  color: white;
}
/************************search**************************/
.wrapper .search{
  width: 100%;
  height: 13vw;
}
.wrapper .search .search-fixed-top{
  width: 100%;
  height: 13vw;
  background-color: #0097FF;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .search .search-fixed-top .search-box{
  width: 90%;
  height: 9vw;
  background-color: white;
  border-radius:  2px;  /*圆角*/

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 3.5vw;
  color: #AEAEAE;
  font-family: 宋体;
  user-select: none;   /*让文本选中无效*/
}
.wrapper .search .search-fixed-top .search-box .fa-search{
  margin-right: 1vw;
}

/************************点餐分类**************************/
.wrapper .food-type{
  width: 100%;
  height: 48vw;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.wrapper .food-type li{
  width: 18vw;
  height: 20vw;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  user-select: none;
  cursor: pointer;
}
.wrapper .food-type li img{
  width: 12vw;
  height: 12vw;
}
.wrapper .food-type li p{
  font-size: 3.2vw;
  color: #666;
}

/************************广告**************************/
.wrapper .banner{
  width: 95%;
  margin: 0 auto;
  height: 29vw;

  background-image: url("../img/index_banner.png");
  background-repeat: no-repeat;
  background-size: cover;/*成比例充满整个窗口*/

  box-sizing: border-box;
  padding: 2vw 6vw;
}
.wrapper .banner .h3{
  font-size: 4.2vw;
  margin-bottom: 1.2vw;
}
.wrapper .banner p{
  font-size: 3.4vw;
  color: #666;
  margin-bottom: 2.4vw;
}
.wrapper .banner a{
  font-size: 3vw;
  color: #C79060;
  font-weight: 700;
  user-select: none;
  cursor: pointer;
}

/************************点餐分类**************************/
.wrapper .supermember{
  width: 95%;
  margin: 0 auto;
  height: 11.5vw;
  background-color: #FEEDC1;
  margin-top: 1.3vw;
  border-radius: 2px;
  color: #644F1B;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .supermember .left{
  display: flex;
  align-items: center;
  margin-left: 4vw;
  user-select: none;
}
.wrapper .supermember .left img{
  width: 6vw;
  height: 6vw;
  margin-right: 2vw;
}
.wrapper .supermember .left h3{
  font-size: 4vw;
  margin-right: 2vw;
}
.wrapper .supermember .left p{
  font-size: 3vw;
}
.wrapper .supermember .right{
  font-size: 3vw;
  margin-right: 4vw;
  cursor: pointer;
}

/************************推荐商家**************************/
.wrapper .recommend{
  width: 100%;
  height: 14vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .recommend .recommend-line{
  width: 6vw;
  height: 0.2vw;
  background-color: #888;
}
.wrapper .recommend p{
  font-size: 4vw;
  margin: 0 4vw;
}

/************************推荐方式**************************/
.wrapper .recommendtype{
  width: 100%;
  height: 5vw;
  margin-bottom: 5vw;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper .recommendtype li{
  font-size: 3.5vw;
  color: #555;
}

/************************推荐商家列表**************************/
.wrapper .business{
  width: 100%;
  margin-bottom: 14vw;
}
.wrapper .business li{
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  user-select: none;
  border-bottom: solid 1px #DDD;

  display: flex;
}
.wrapper .business li img {
  width: 18vw;
  height: 18vw;
}
.wrapper .business li .business-info{
  width: 100%;
  box-sizing: border-box;
  padding-left: 3vw;
}
.wrapper .business li .business-info .business-info-h{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
}
.wrapper .business li .business-info .business-info-h h3{
  font-size: 4vw;
  color: #333;
}
.wrapper .business li .business-info .business-info-h .business-info-like{
  width:  1.6vw;
  height: 3.4vw;
  background-color: #666;
  color: #fff;
  font-size: 4vw;
  margin-right: 4vw;

  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .business li .business-info .business-info-star{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
  font-size: 3.1vw;
}
.wrapper .business li .business-info .business-info-star .business-info-star-left{
  display: flex;
  align-items: center;
}
.wrapper .business li .business-info .business-info-star .business-info-star-left .fa-star{
  color: #FFC80E;
  margin-right: 0.5vw;
}
.wrapper .business li .business-info .business-info-star .business-info-star-left p{
  color: #666;
  margin-left: 1vw;
}
.wrapper .business li .business-info .business-info-star .business-info-star-right{
  background-color: #0097FF;
  color: #fff;
  font-size: 2.4vw;
  border-radius: 2px;
  padding: 0 0.6vw;
}
.wrapper .business li .business-info .business-info-delivery{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;

  color: #666;
  font-size: 3.1vw;
}
.wrapper .business li .business-info .business-info-explain{
  display: flex;
  align-items: center;
  margin-bottom: 3vw;
}
.wrapper .business li .business-info .business-info-explain div{
  border: solid 1px #DDD;
  font-size: 2.8vw;
  color: #666;
  border-radius: 3px;
  padding: 0 0.1vw;
}
.wrapper .business li .business-info .business-info-promotion{
  display: flex;
  justify-content: space-between ;
  align-items: center;
  margin-bottom: 1.8vw;
}
.wrapper .business li .business-info .business-info-promotion .business-info-promotion-left{
  display: flex;
  align-items: center;
}
.wrapper .business li .business-info .business-info-promotion .business-info-promotion-left .business-info-promotion-left-icon{
  width: 4vw;
  height: 4vw;
  background-color: #70BC46;
  border-radius: 3px;
  font-size: 3vw;
  color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .business li .business-info .business-info-promotion .business-info-promotion-left p{
  color: #666;
  font-size: 3vw;
  margin-left: 2vw;
}
.wrapper .business li .business-info .business-info-promotion .business-info-promotion-right{
  display: flex;
  align-items: center;
  font-size: 2.5vw;
  color: #999;
}
.wrapper .business li .business-info .business-info-promotion .business-info-promotion-right p{
  margin-right: 2vw;
}
/************************底部菜单**************************/
.wrapper .footer{
  width: 100%;
  height: 14vw;
  border-top: solid 1px #DDD;
  background-color: #fff;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper .footer li{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: #999;
  user-select: none;
  cursor: pointer;
}
.wrapper .footer li p{
  font-size: 2.8vw;
}
.wrapper .footer li i{
  font-size: 5vw;
}









